<template>
	<div class="content-custBasic">
    <div class="custBasic-left" @scroll.native="getScroll">
      <div class="anchor" id="basicInfo">
        <p class="el-descriptions__title">基本信息</p>
        <el-divider />
        <el-descriptions border >
          <el-descriptions-item label="客户姓名">唐思琪</el-descriptions-item>
          <el-descriptions-item label="性别">女</el-descriptions-item>
          <el-descriptions-item label="联系方式">
            <span>13456326532  <el-icon class="icon"><EditPen /></el-icon></span>
          </el-descriptions-item>
          <el-descriptions-item label="证件类型">身份证</el-descriptions-item>
          <el-descriptions-item label="证件号码">18100000000</el-descriptions-item>
          <el-descriptions-item label="客户等级">砖石客户</el-descriptions-item>
          <el-descriptions-item label="是否信贷客户">是</el-descriptions-item>
          <el-descriptions-item label="最早开户时间">2019-09-09</el-descriptions-item>
          <el-descriptions-item label="网格属性">网格外</el-descriptions-item>
          <el-descriptions-item label="居住地址" :span="3">
            <span>
              浙江省杭州市西湖区999号 <el-icon class="icon"><EditPen /></el-icon>
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="唯一归属机构"  :span="3">望江支行营业部</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="anchor" id="tagInfo">
        <p class="el-descriptions__title">标签信息</p>
        <el-divider />
        <div class="blockDiv">
          <el-row class="row">
            <el-col :span="5" class="col" v-for="item in tabsActiveName" :key="item">{{item}}</el-col>
          </el-row>
        </div>
      </div>
      <div class="anchor" id="guishuInfo">
        <p class="el-descriptions__title">归属信息</p>
        <el-divider />
        <div class="blockDiv">
          <el-radio-group v-model="attributionObj.tabPosition" style="margin-bottom: 30px">
            <el-radio-button label="top">主管户客户经理</el-radio-button>
            <el-radio-button label="right">管户客户经理</el-radio-button>
            <el-radio-button label="bottom">团队信息</el-radio-button>
          </el-radio-group>
          <p class="tipsIconP">
            <span>
              <el-icon><UserFilled /></el-icon>{{attributionObj.tabPositionMes}}
            </span>
            <span class="btnSpan">
              <span class="btn"><el-icon class="icon" ><CirclePlusFilled /></el-icon>增加</span>
              <span class="btn"><el-icon class="icon2" ><DeleteFilled /></el-icon>删除</span>
              <span class="btn"><el-icon class="icon2" ><Pointer /></el-icon>认领</span>
            </span>
          </p>
          <el-row class="row">
            <el-col :span="24" class="activeCol" v-for="item in attributionObj.tabPositionArray" :key="item">
              <el-row >
                <el-col :span="1" class="checkCol">
                  <el-checkbox class="checkbox" size="large" />
                </el-col>
                <el-col :span="23">
                  <el-row >
                    <el-col class="activeTipsCol" :span='8' v-for="tipsItem in attributionObj.tabPositionTipsItemArray" :key="item.tipsCode">
                      <span class="tipsTitle">{{ tipsItem.tipsMes }}</span>
                      <span v-if="!tipsItem.isTag">{{ item[tipsItem.tipsCode] }}</span>
                      <el-tag v-if="tipsItem.isTag">{{ item[tipsItem.tipsCode]?'有效':'无效' }}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="anchor" id="relevanceInfo">
        <p class="el-descriptions__title">关联信息</p>
        <el-divider />
        <el-descriptions border >
          <el-descriptions-item v-for="item in attributionObj.relevanceTips" :key="item.tipsCode" :label="item.label" :span="item.span||1">唐思琪</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div class="custBasic-right">
      <ul class="toc-items" >
        <li class="toc-li"><el-link :type="activedMes=='basicInfo'?'primary':''" @click="fetchData('basicInfo')" class="link" :underline="false">基本信息</el-link></li>
        <li class="toc-li"><el-link @click="fetchData('tagInfo')" class="link" :type="activedMes=='tagInfo'?'primary':''" :underline="false">标签信息</el-link></li>
        <li class="toc-li"><el-link @click="fetchData('guishuInfo')" class="link" :type="activedMes=='guishuInfo'?'primary':''" :underline="false">归属信息</el-link></li>
        <li class="toc-li"><el-link @click="fetchData('relevanceInfo')" class="link" :type="activedMes=='relevanceInfo'?'primary':''" :underline="false">关联信息</el-link></li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
const activedMes = ref('basicInfo')
const tabsActiveName = ref(['2023年小巨人','2023年小巨人','2023年小巨人','2023年小巨人']);
const attributionObj = ref({
  tabPosition: 'top',
  tabPositionMes: '管户客户经理',
  tabPositionTipsItemArray: [
    { tipsMes: '客户经理号：', tipsCode: 'custNo' },
    { tipsMes: '客户经理名称：', tipsCode: 'custName' },
    { tipsMes: '当前标志：', tipsCode: 'isType', isTag:true},
    { tipsMes: '开始时间：', tipsCode: 'startTime' },
    { tipsMes: '结束时间：', tipsCode: 'endTime' },
  ],
  tabPositionArray: [{ custNo: '013413', custName: '沈亚婷', isType: true, startTime: '2021-06-30', endTime: '3000-12-31' },{ custNo: '013413', custName: '沈亚婷', isType: true, startTime: '2021-06-30', endTime: '3000-12-31' }],
  relevanceTips: [
    {tipsCode:'name1',label:'关系人姓名1',},
    {tipsCode:'type1',label:'关系类型',},
    {tipsCode:'sex1',label:'性别',},
    {tipsCode:'birthday1',label:'生日',},
    {tipsCode:'phone1',label:'联系方式',span:2},
    {tipsCode:'name2',label:'关系人姓名2',},
    {tipsCode:'type2',label:'关系类型',},
    {tipsCode:'sex2',label:'性别',},
    {tipsCode:'birthday2',label:'生日',},
    {tipsCode:'phone2',label:'联系方式',span:2}
  ]
});

// const isActived = (id: string) => {
//   if (activedMes == id) { return 'primary' }
//   return ''
// }
const fetchData = (id: string) => {
  let str = '#' + id
  activedMes.value = id
  if (str!=null) {
    document.querySelector(str)?.scrollIntoView({behavior:"smooth"})
  }
}
const getScroll = () => {
  const ele = document.querySelector('.custBasic-left');
  let currentScrollTop =  ele.scrollTop
  const navContents  = document.querySelectorAll('.anchor')
  const offsetTopArr = []
  const offsetHeightArr = []
  navContents.forEach(element => {
    offsetTopArr.push(element.offsetTop)
    offsetHeightArr.push(element.offsetHeight)
  })
  let navIndex = 0
  for (let n = 0; n < offsetTopArr.length; n++) {
    if ((currentScrollTop>offsetTopArr[n]-offsetTopArr[0])&&(currentScrollTop<offsetTopArr[n]+offsetHeightArr[n])) {
      navIndex=n
    }
  }
  if (navIndex==0) {
    // fetchData('basicInfo')
    activedMes.value  = 'basicInfo'
  } else if (navIndex==1) {
    // fetchData('tagInfo')
    activedMes.value  = 'tagInfo'
  }else if (navIndex==2) {
    // fetchData('guishuInfo')
    activedMes.value  = 'guishuInfo'
  }else if (navIndex==3) {
    // fetchData('relevanceInfo')
    activedMes.value  = 'relevanceInfo'
  }
  let isbottom = ele.scrollTop + ele?.clientHeight - ele?.scrollHeight
  if (isbottom>=0) {
    activedMes.value  = 'relevanceInfo'
  }
  // console.log(navIndex)
}


</script>
<style scoped lang="scss">

.blockDiv{
  margin-bottom: 10px;
  .tipsIconP{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 14px;
    color: #7B7F8C;
    .btnSpan{
      display: flex;
      flex-direction: row;
      align-items: center;
      .btn{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 0 10px;
        font-size: 14px;
        color: #495169;
        cursor: pointer;
        .icon{
          margin-right: 5px;
          color:#0263FF
        }
        .icon2{
          margin-right: 5px;
          color:#FF6B00
        }
      }
    }
  }
}
.row{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .col{
    background: #F8F9FB;
    border-radius: 8px;
    height: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .activeCol{
    height: 82px;
    background:rgb(246, 247, 251);
    border-radius: 4px;
    margin-top: 10px;
  }
  .checkCol{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .activeTipsCol{
    margin-top: 18px;
    .tipsTitle{
      font-size: 14px;
      color: #898FA0;
    }
  }
}
.content-custBasic{
  padding: 10px;
  max-height: 60vh;
  display: flex;
  .custBasic-left{
    overflow: auto;
  }
  .custBasic-right{
    width: 125px;
    height: 100%;
    .toc-items{
      list-style: none;
      padding: 0px;
      margin: 12px 0px 0px;
      .toc-li{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        .link{
          font-size: 20px;
        }
      }
    }
  }
}

.icon{
  cursor: pointer;
  color:  #337ecc;
}
.el-descriptions__title{
  margin-top: 10px;
}
</style>